<template>
  <div>
    <div class="title">
      <p style="font-weight:600"><span>{{ currentYear }}年</span>出入口流量趋势图</p>
    </div>
    <div class="tab">
      <div class="theDate" @click="showPopupPicker = true">
        <div>{{ currentYear }}年</div>
        <div class="grayCrow"></div>
      </div>
      <div class="theDate" @click="showPopupPicker1 = true">
        <div>{{ columns1[tabIndex] }}</div>
        <div class="grayCrow"></div>
      </div>
      <div class="theDate" @click="showPopupPicker2 = true">
        <div>{{ columns2[tableIndex] }}</div>
        <div class="grayCrow"></div>
      </div>
    </div>


    <van-popup v-model="showPopupPicker" position="bottom">
      <van-picker title="请选择年份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPopupPicker = false"
        :visible-item-count="3" :default-index="currentYear - 2021" />
    </van-popup>
    <van-popup v-model="showPopupPicker1" position="bottom">
      <van-picker title="请选择出入口" show-toolbar :columns="columns1" @confirm="onConfirm1"
        @cancel="showPopupPicker1 = false" :visible-item-count="3" :default-index="0" />
    </van-popup>
    <van-popup v-model="showPopupPicker2" position="bottom">
      <van-picker title="请选择车型" show-toolbar :columns="columns2" @confirm="onConfirm2"
        @cancel="showPopupPicker2 = false" :visible-item-count="3" :default-index="0" />
    </van-popup>
    <detail-aweek :title="$route.query.title" :listInfo="listInfo" :qingfenLegend="qingfenLegend"></detail-aweek>
    <div>
      <second-tab></second-tab>
      <div v-for="index in tableHeader.length" :key="index" style="margin-top: -0.2rem">
        <cus-table :index="index" :tableHeight="tableHeight" :second-title="titleList[index - 1]" :tab-list="tabList"
          :table-header="tableHeader[index - 1]" :flagIndex="index - 1" :table-data="tableDataList[index - 1]">
        </cus-table>
      </div>
    </div>

    <img v-if="showBackTop" class="backTop" src="~@/assets/feeManage/top.png" @click="backTop" alt="">
  </div>
</template>

<script>
import DetailAweek from "./component/detailAweek";
import SecondTab from './component/SecondTab'
import cusTable from './component/cusTable'
import { tableHeaderList } from './component/cusTable/tableHeaderConfig'
import { fd } from '@/utils/request'
import { mapGetters } from 'vuex'
import scroll from '@/mixins/scroll'

export default {
  name: 'index',
  data() {
    return {
      pathIndex: 0,
      tabIndex: 0,
      tableIndex: 0,
      type: '',
      listInfo: [],
      showPopupPicker: false,
      showPopupPicker1: false,
      showPopupPicker2: false,
      currentYear: '',
      qingfenLegend: ["今年", "去年"],
      tableHeight: 90,
      tabList: [],
      tableHeader: [[], [], []],
      titleList: [],
      tableDataList: [],
      paramList: [],
      paramparamList: [[
        ['/NewPlaztraf/vhtype', 'vhtype', 1],
        ['/NewPlaztraf/huo', 'huo', 1],
        ['/NewPlaztraf/ke', 'ke', 1]
      ], [
        ['/GetAPTraf/vhtype', 'vhtype', 1],
        ['/GetAPTraf/huo', 'huo', 1],
        ['/GetAPTraf/ke', 'ke', 1]
      ],

      ],
      paths: [
        '/NewSubctraf/getQsSubcTraf',
        '/NewSubctraf/getQsSubcTraf',
      ],
    }
  },
  mixins: [scroll],
  components: {
    DetailAweek,
    SecondTab,
    cusTable
  },
  computed: {
    columns() {
      const year = new Date().getFullYear()
      var yearList = []
      for (let i = 2021; i <= year; i++) {
        yearList.push(i)
      }
      return yearList
    },
    columns1() {
      return ['出入口', '入口', '出口']
    },
    columns2() {
      return ['全部车型', '货车', '客车']
    },
    ...mapGetters(['firstTabId', 'detailTime', 'detailTabIndex', 'detailTableIndex', 'timeObj'])
  },
  watch: {
    detailTableIndex(val, old) {
      if (val == 9 || old == 9) return
      this.updateData()
    },
    detailTabIndex(val) {
      if (val == 9) return
      this.updateData()
    },
    detailTime: {
      handler(val) {
        if(!val) return 
        this.$store.commit('SETDETAILTABINDEX', 9)
        this.$store.commit('SETDETAILTABLEINDEX', 9)
        this.updateData();
      },
      deep: true
    }
  },
  async mounted() {
    this.pathIndex = this.$route.query.pathIndex || 0;
    this.tabIndex = this.$route.query.tabIndex || 0;
    this.tableIndex = this.$route.query.tableIndex || 0;
    this.currentYear = this.timeObj.startData.split('-')[0];
    document.title = `${this.firstTabId == 4 ? this.$route.query.title : this.$route.query.title + '分中心'}`
    this.$store.commit('SETDETAILTIME', { startData: this.timeObj.startData, endData: this.timeObj.endData })
    const { tabList, tableHeader, titleList } = tableHeaderList
    this.tabList = tabList
    this.tableHeader = tableHeader
    this.titleList = titleList
    this.updateData('init')
  },
  methods: {
    onConfirm(value, index) {
      this.showPopupPicker = false
      this.currentYear = value
      this.getInfo()
    },
    onConfirm1(value, index) {
      this.tabIndex = index;
      this.showPopupPicker1 = false
      this.getInfo()
    },
    onConfirm2(value, index) {
      this.tableIndex = index;
      this.showPopupPicker2 = false
      this.getInfo()
    },
    async getInfo() {
      let value = this.currentYear;
      let nowYear = new Date().getFullYear();
      let list = nowYear == value ? ["今年", "去年"] : [value + '年', (value - 1) + '年'];
      this.qingfenLegend = list;
      const params = {
        subcno: this.$route.query.title,
        edhm: this.currentYear + '0101',
        lanetype: parseInt(this.tabIndex) + 1,
        vehtype: parseInt(this.tableIndex) + 1
      }
      await this.$Post(this.paths[this.pathIndex],
        params,
        ({ data }) => {
          this.listInfo = data
        },
        err => {
          this.$alertShow(err.message);
        },
        false
      )
    },
    updateData(fl = '') {
      // 0是标识, 重置状态之后的标识, 不重置状态会导致都点击出口时, 不触发监听
      // if (this.detailTabIndex === 0) {
      //   return
      // }
      // 判断如果是初始化数据时, 不执行数据替换操作
      if (fl !== 'init' && this.detailTabIndex !== 9) {
        this.paramparamList[this.pathIndex][this.detailTableIndex][2] = this.detailTabIndex
      }
      // 调用Promise.all
      this.paramList = [
        this.getData(...this.paramparamList[this.pathIndex][0]),
        this.getData(...this.paramparamList[this.pathIndex][1]),
        this.getData(...this.paramparamList[this.pathIndex][2]),
        this.getInfo()
      ]
      this.PromiseAllData()
    },
    async PromiseAllData() {
      this.$vux.loading.show({
        text: "加载中..."
      });
      const result = await Promise.all(this.paramList).finally(() => {
        this.$vux.loading.hide();
      })
      this.tableDataList = result
      this.$nextTick(() => {
        if (document.querySelector('.el-table__row td')) {
          let height = window.getComputedStyle(document.querySelector('.el-table__row td'), null).height;
          height = parseInt(height) * 9 + 64;
          this.tableHeight = height;
        }
      })
      // 重置状态, 不重置状态会导致都点击出口时, 不触发监听
      // this.$store.commit('SETDETAILTABINDEX', 0)
      // this.$store.commit('SETDETAILTABLEINDEX', 0)
    },
    async getData(methodName, type, method) {
      const params = {
        sdhm: this.detailTime.startData.replace(/-/g, ''),
        edhm: this.detailTime.endData.replace(/-/g, ''),
        method,
        type,
        subcno: this.$route.query.title
      }
      const { data } = await this.$PostRequest(methodName, fd(params))
      return data.data
    },
    // 回到顶部
    backTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;

  p {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    height: 0.36rem;
    font-size: 0.36rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #333333;
    line-height: 0.36rem;

    span {
      color: #46AE65;
    }
  }
}

.tab {
  display: flex;
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  margin-bottom: 0.1rem;

  .theDate {
    padding: 0 .1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.2rem;
    margin-right: 0.3rem;
    min-width: 1.26rem;
    height: 0.6rem;
    background: #F7F7F7;
    border-radius: 0.12rem;
    border: 0.01rem solid #CBCBCB;
    font-size: 0.26rem;
    color: #666;

    div {
      font-family: PingFangSC-Regular, PingFang SC;
    }

    .grayCrow {
      margin-left: 0.08rem;
      width: 0;
      height: 0;
      border-right: 0.1rem solid transparent;
      border-left: 0.1rem solid transparent;
      border-top: 0.1rem solid #cccccc;
    }
  }

  .tab-item {
    margin: 0 0.28rem 0 0;
    width: 1.6rem;
    height: 0.54rem;
    background: #F3F4F5;
    border-radius: 0.08rem;
    font-size: 0.28rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    line-height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active {
      color: #4375C9;
      background: #EEF4FE;
      border: 0.02rem solid #4375C9;
    }
  }
}

.backTop {
  position: fixed;
  width: 0.72rem;
  height: 0.72rem;
  right: 0.3rem;
  bottom: 0.3rem;
}
</style>
